<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户登录</title>
    <script src="js/jquery-3.1.1.min.js"></script>
    <script src="js/vue.js"></script>
        <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
        <style>
		.login-one{
		  background-image:url(image/login.jpg);
		  background-size: cover;
		  background-repeat:no-repeat;
		  overflow:hidden;
		  height: 100%;
		}
		</style>
</head>
	<body class="login-one">
		<div id="myApp">
			<!-- 登录 -->
				<el-form  ref="userInfo" class="demo-ruleForm" label-width="80px" style="background-color: white;width: 500px;position: fixed;left:35%;top:30%;border-radius: 10px;">
					 <h1 align="center">用户登录</h1>
					
					<!-- 新增身份选择 -->
					<el-form-item label="身份" prop="identity">
						<el-radio-group v-model="identity">
							<el-radio label="student">学生</el-radio>
							<el-radio label="teacher">教师</el-radio>
						</el-radio-group>
					</el-form-item>
					
					<el-form-item label="邮箱" prop="userName" >
							<el-col :span="22">
								<el-input v-model="email"></el-input>
							</el-col>
					</el-form-item>

					<el-form-item label="验证码" prop="code">
						<el-col :span="12">
							<el-input  v-model ="code" ></el-input>
						</el-col>
                        <el-col :span="12">
								<el-button  @click="send" >发送验证码</el-button>
						</el-col>
					</el-form-item>

					<el-form-item >
							<el-button icon="el-icon-user-solid" type="success"  @click="login" >登录</el-button>

					</el-form-item>
				</el-form>
		</div>

	</body>
<script>
     new Vue({
         el:"#myApp",//绑定元素
         data:{//定义数据
             email:"" ,//邮箱
             code:"",//验证码
             identity: "student" // 新增身份字段，默认学生
         },
         methods:{
             login(){//定义发送验证码的函数
                 //发送ajax请求
                 $.ajax({
                     url:"/login/" ,//服务端地址
                     data:{"code":this.code},
                     success:function (rs){//回调函数，接收服务端发送的数据
                         console.log(rs);
                          if(rs.code==200){
                              alert("登录成功");
                              // 跳转到首页
                              window.location.href="/static/index.html";
                          }else{
                              alert("验证码不正确");
                          }
                     }
                 })

             },
             send(){//定义发送验证码的函数
                 //发送ajax请求
                 $.ajax({
                     url:"/sendCode/" ,//服务端地址
                     data:{"email":this.email},
                     success:function (rs){//回调函数，接收服务端发送的数据
                         console.log(rs);
                          if(rs.code==200){
                              alert("发送成功");
                          }else{
                              alert("发送失败");
                          }
                     }
                 })

             }
         }

     })
</script>


</html>